<template>
  <el-dialog
    :title="title"
    :visible="isShow"
    width="450px"
    destroy-on-close
    @click="activeFile = null"
    @close="callback('close')"
  >
    <el-tree
      :ref="`browse_${name}`"
      :data="treeData"
      :expand-on-click-node="false"
      class="tree-style"
      @node-expand="expand"
      @node-collapse="collapse"
      @click.native="activeFile = null"
      @node-click="handleNodeClick"
    />

    <div slot="footer" class="dialog-footer">
      <el-button @click="callback('close')">取 消</el-button>
      <el-button
        type="primary"
        :disabled="!activeFile"
        @click="callback('open')"
      >打开</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from 'lodash-es';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    title: {
      type: String,
      default: () => ''
    },
    name: {
      type: String,
      default: () => ''
    },
    type: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      activeFile: null,
      treeData: null
    };
  },
  methods: {
    setTreeData() {
      this.treeData = cloneDeep(this.$store.state.matlab.originTreeData);
    },
    callback(type) {
      this.$emit('callback', type, this.activeFile);
      this.activeFile = null;
    },
    handleNodeClick(data, node) {
      if (this.type === 'file') {
        this.activeFile = data.isFile ? data : null;
      } else {
        this.activeFile = data.isFile ? null : node;
      }
    },
    expand(data) {
      this.handleNodeClick(data);
    },
    collapse(data) {
      this.handleNodeClick(data);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 75%;

  .el-dialog__body {
    min-height: 30px;
    height: calc(100% - 125px);
    max-height: 500px;
    overflow-y: auto;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .is-leaf + .el-tree-node__label {
    padding-left: 24px;
  }
}
.tree-style {
  border: 1px solid black;
  height: 100%;
}
</style>
